<template>
  <h1>我是App组件</h1>
  <p>姓: <input type="text" v-model="person.firstName" /></p>
  <p>名: <input type="text" v-model="person.lastName" /></p>
  <span>{{ person.fullName }}</span>
  <p><input type="text" v-model="person.fullName" /></p>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "Demo",
  setup() {
    let person = reactive({
      firstName: "",
      lastName: "",
    });
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const valueArr = value.split("-");
        person.firstName = valueArr[0];
        person.lastName = valueArr[1];
      },
    });
    return {
      person,
    };
  },
};
</script>

<style></style>
